<template>
  <el-dialog :width="dialogWidth" class="goods_dialog" title="选择商品" :visible.sync="dialogVisible" :append-to-body="appendToBody" :close-on-click-modal="false">
    <div class="flex main_wrapper">
      <div class="flex-1">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="商品ID或名称">
            <el-input v-model="searchForm.goods_name" placeholder="请输入商品ID或名称" @keyup.enter.native="search" />
          </el-form-item>
          <el-form-item v-if="showTypeSelect" label="产品类别">
            <el-select v-model="searchForm.cate_id" clearable placeholder="请选择产品类别">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" @click="clearSearch">重置</el-button>
            <slot name="btns" />
          </el-form-item>
        </el-form>
        <div class="flex flex-wrap goods_list">
          <template v-for="item in goodsList">
            <div :key="item.goods_id" class="flex goods_item" :class="{ 'active': isSelect(item.goods_id) }" @click="handleSelect(item)">
              <svg-icon v-if="isSelect(item.goods_id)" icon-class="check" :size="10" class="check_icon" />
              <el-image :src="$globalObj.imgBaseUrl + item.imgurl" fit="fill" />
              <div class="line-block">
                <p class="goods_title">{{ item.title }}</p>
                <p class="goods_id">ID: {{ item.goods_id }}</p>
                <p v-show="showCate" class="goods_id">分类: {{ item.cate_name }}</p>
              </div>
            </div>
          </template>
        </div>
        <div class="text-right">
          <el-pagination :current-page.sync="searchForm.page" :page-size="pageSize" layout="total, prev, pager, next" :total="total" prev-text="上一页" next-text="下一页" background @current-change="handleCurrentChange" />
        </div>
      </div>
      <div class="checked_wrap">
        <p style="margin-bottom:30px">已选商品（{{ selectItems.length }}<span v-if="maxNum">/{{ maxNum }}</span>）</p>
        <template v-for="(sItem, index) in selectItems">
          <goods-link :key="sItem.goods_id" ref="goodsLink" :show-cate="showCate" :goods-data="sItem" :show-sort="multiple" :show-tool="showCheckedTool" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
        </template>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCategoryList, getGoodsList } from '@/api/goods'
import goodsLink from '../views/recommend/compoments/goodsLink'
export default {
  components: { goodsLink },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    dialogWidth: {
      type: String,
      default: '1020px'
    },
    maxNum: {
      type: Number,
      default: 0
    },
    showTypeSelect: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 8
    },
    showCheckedTool: {
      type: Boolean,
      default: false
    },
    showCate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        goods_name: '',
        cate_id: null,
        page: 1
      },
      selectItems: [],
      goodsList: [],
      total: 0,
      categoryList: []
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getList()
        if (this.showTypeSelect) {
          this.getSelectList()
        }
      } else {
        // 重置
        this.reset()
      }
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      const item = this.selectItems[index]
      this.$set(this.selectItems, index, this.selectItems[index - 1])
      this.$set(this.selectItems, index - 1, item)
    },
    // 降序
    downSort(index) {
      if (index === this.selectItems.length - 1) {
        return
      }
      const item = this.selectItems[index]
      this.$set(this.selectItems, index, this.selectItems[index + 1])
      this.$set(this.selectItems, index + 1, item)
    },
    // 删除商品
    deleteGoods(index) {
      this.selectItems.splice(index, 1)
    },
    // 获取商品列表
    getList() {
      console.log(this.searchForm, 'search')
      getGoodsList({ pageSize: this.pageSize, ...this.searchForm }).then(res => {
        this.goodsList = res.data
        this.total = res.total
      })
    },
    submit() {
      this.$emit('setSelect', this.selectItems)
      this.dialogVisible = false
    },
    // 点击选中
    handleSelect(select) {
      const index = this.selectItems.findIndex(item => item.goods_id === select.goods_id)
      if (index > -1) {
        // 已经选中取消选中
        this.selectItems.splice(index, 1)
      } else {
        // 选中
        if (this.multiple) {
          // 多选
          if (this.selectItems.length < this.maxNum) {
            this.selectItems.push(select)
          } else {
            this.$message({
              message: '数量已达到可选上限',
              type: 'warning'
            })
          }
        } else {
          // 单选
          this.selectItems = [select]
        }
      }
    },
    // 判断是否选中
    isSelect(id) {
      return this.selectItems.findIndex(item => item.goods_id === id) > -1
    },
    // 页码切换
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getList()
    },
    // 搜索商品
    search() {
      if (this.searchForm.goods_name || this.searchForm.cate_id) {
        this.searchForm.page = 1
        this.getList()
      }
    },
    // 重置
    clearSearch() {
      this.searchForm.goods_name = ''
      this.searchForm.cate_id = ''
      this.searchForm.page = 1
      this.getList()
    },
    // 清空数据
    reset() {
      this.searchForm = {
        goods_name: '',
        cate_id: null,
        page: 1
      }
      this.selectItems = []
    },
    // 获取二级分类列表
    getSelectList() {
      getCategoryList().then(res => {
        this.categoryList = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_item {
  position: relative;
  width: 310px;
  height: 110px;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  border: 1px solid #eeeeee;

  &.active {
    border: 1px solid $mainBlue;
  }

  .check_icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
  }

  .el-image {
    margin-right: 10px;
    width: 90px;
    height: 90px;
  }

  .goods_title {
    color: #666666;
    // margin: 12px 0;
  }

  .goods_id {
    color: #999999;
    margin-top: 10px;
  }
}

.checked_wrap {
  width: 350px;
  padding: 10px;
  max-height: 560px;
  overflow: auto;
  border-left: 1px solid #eeeeee;
}
</style>
